<template>
  <div class="choice">
    <div class="banner">
      <a href>
        <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e32eea5c3c27062019f9ac6434b351df.jpg" alt />
      </a>
    </div>
    <div class="choice-list">
      <div
        v-for="item in choiceList" :key="item.id"
        class="choice-list-item"
      >
        <img :src="item.imgUrl" alt />
        <h3>{{item.productName}}</h3>
        <p class="slogan">{{item.productSlogan}}</p>
        <p class="price">
          <span class="disout">
            &yen;{{item.price}}
            <i>起</i>
          </span>
          <span v-if="item.market" class="market">&yen;{{item.market}}</span>
        </p>
      </div>
    </div>
    <div class="more"><span>更多 &gt;</span></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      choiceList: []
    }
  },
  created () {
    this.getChoiceList()
  },
  methods: {
    async getChoiceList () {
      const { data: res } = await this.$axios.get('home/indexchoice')
      if (res.code === 1) {
        this.choiceList = res.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/mixin";
.choice {
  .banner {
    margin-bottom: px2rem(6.66 / 2);
    img {
      display: block;
      width: 100%;
    }
  }
  .choice-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border-bottom: 1px solid #CECECE;
    padding-bottom: px2rem(6.66 / 2);
    .choice-list-item {
      width: px2rem(344 / 2);
      img {
        width: 100%;
      }
      h3,
      p {
        text-align: center;
      }
      h3 {
        font-size: px2rem(28 / 2);
        line-height: px2rem(32 / 2);
        color: #000;
      }
      .slogan {
        line-height: px2rem(30 / 2);
        font-size: px2rem(22 / 2);
        color: rgba(0, 0, 0, 0.54);
        padding: px2rem(6 / 2);
      }
      .price {
        display: flex;
        justify-content: center;
        align-items: center;
        .disout {
          color: #ea625b;
          line-height: px2rem(42 / 2);
          font-size: px2rem(28 / 2);
          i {
            font-size: px2rem(22 / 2);
          }
        }
        .market {
          font-size: px2rem(22 / 2);
          line-height: px2rem(26 / 2);
          color: rgba(0, 0, 0, 0.54);
          margin-left: px2rem(10 / 2);
          text-decoration: line-through;
        }
      }
    }
  }
  .more {
    height: px2rem(100 / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: rgba(0,0,0,.6);
      font-size: px2rem(28 / 2);
    }
  }
}
</style>
